<template>
  <BeforeNavBar/>
    <div class="dibu">
        <div class="tou">
            <p>知识图谱</p>

        </div>
        <section class="knowledge-section">
            <!-- <h2>知识图谱 <a href="#">更多>></a></h2> -->
            <!-- <div class="sidebar">
            <ul class="liebiao">
                <div class="wen">
                <li class="lii"><a href="#" @click.prevent="showContent('content1')" class="wenzi">知识图谱1</a></li>
                <li class="lii"><a href="#" @click.prevent="showContent('content2')" class="wenzi">知识图谱2</a></li>
                <li class="lii"><a href="#" @click.prevent="showContent('content3')" class="wenzi">知识图谱3</a></li>
                <li class="lii"><a href="#" @click.prevent="showContent('content4')" class="wenzi">知识图谱4</a></li>
                <li class="lii"><a href="#" @click.prevent="showContent('content5')" class="wenzi">知识图谱5</a></li>
                <li class="lii"><a href="#" @click.prevent="showContent('content6')" class="wenzi">知识图谱6</a></li>
                </div>
            </ul>
            <div v-if="currentContent === 'content1'" class="neirong">
                内容1的视图
            </div>
            <div v-if="currentContent === 'content2'" class="neirong">
                内容2的视图
            </div>
            <div v-if="currentContent === 'content3'" class="neirong">
                内容3的视图
            </div>
            <div v-if="currentContent === 'content4'" class="neirong">
                内容4的视图
            </div>
            <div v-if="currentContent === 'content5'" class="neirong">
                内容5的视图
            </div>
            <div v-if="currentContent === 'content6'" class="neirong">
                内容6的视图
            </div>
            </div> -->
        </section>

    </div>
    
</template>
  
  <script>
import BeforeNavBar from '@/components/BeforeNavBar.vue';
 
  //import AppSidebar from "@/components/AppSidebar.vue";
 
  export default {
    name: 'knowledge',
    components: {
  
    BeforeNavBar
  },
 
    data() {
      return {
        currentContent: 'content1',// 初始内容为 content1
      };
    },
   
    mounted() {
    
    },
    methods: {
        showContent(contentId) {
        // 实现函数逻辑
        this.currentContent = contentId;
        console.log('显示内容：', contentId);
      },
  
      
    }
  };
  </script>
  <style scoped>
  
  .tou{
    width: 80%;
    height: 70px;
    margin:auto;
    border-radius: 12px 12px 0px 0px;
    background: rgba(36, 41, 47, 1);
margin-top: 10px;
  }
  .tou p{
    font-size: 24px;
font-weight: 700;
letter-spacing: 0px;
line-height: 34.75px;
color: rgba(42, 130, 228, 1);
text-align: left;
vertical-align: top;
padding-top: 20px;
margin-top:  0px;
margin-bottom: 0px;
margin-left:20px;

  }
.knowledge-section{
  height: 550px;
  width: 80%;
  margin:auto;
  background: rgba(36, 41, 47, 1);
  border-radius: 0px 0px 12px 12px;
}


.sidebar {
 width: 100%;
 height: 90%;
 display: flex;
 background: rgba(57, 61, 66, 1);
}
.neirong{
    
    width: 70%;
    height: 90%;
color:rgba(255, 255, 255, 1); /* 设置链接文字颜色为蓝色 */
}
.liebiao{
  width: 25%;
  height: 100%;
  background: rgba(36, 41, 47, 0.8);
  border-radius: 0px 50px 50px 0px;
  margin: 0px;
  padding: 0px 20px 0px 20px;
}
.wenzi{
  font-size: 18px;
font-weight: 400;
letter-spacing: 0px;
line-height: 26.06px;
color: rgba(255, 255, 255, 1);
text-align: left;
vertical-align: top;
text-decoration: none; /* 去除链接的下划线 */


}
.lii{
  margin-top: 20px;
  text-align: left;
  border-bottom: 1px solid white; /* 添加白色底部边框 */
}
.liebiao li::after {
  
  position: absolute; /* 绝对定位在列表项下方 */
  left: 0; /* 距离左侧为0，即从列表项的最左侧开始 */
 
  width: 100%; /* 下划线宽度与列表项宽度一致 */
  height: 1px; /* 下划线高度 */
  color: rgba(255, 255, 255, 1);
  
}
.wen{
  margin-top: 40px;
  width: 100%;
  height: 100%;
 
}
  </style>
  